/*
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2022-11-15 16:58:49
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2022-11-21 10:48:07
 * @FilePath: /vue3-datav/src/components/ui/OlMap/mixin/polygons.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import { Feature } from 'ol';
import { Polygon } from 'ol/geom';
import { asArray } from 'ol/color';
import { Style, Stroke, Fill } from 'ol/style';
import { createPolygonStyleFn } from '../utils/index';


const tapPolygon = function(e) {
    if (!this) throw '请绑定this到事件';
    const pixel = this.map.getEventPixel(e.originalEvent);
    let targetFeature;
    this.map.forEachFeatureAtPixel(pixel, (feature) => {
        if (!targetFeature) {
            targetFeature = feature;
        }
    });
    if (!targetFeature) return;
    const targetType = targetFeature.getProperties().name;
    if (targetType === 'polygon') {
        const data = this.polygonsData[targetFeature.getProperties().index];
        this.$emit('tapPolygon', { event: e, data, targetType });
    }
};
export default {
    data() {
        return {
            polygonNsp: {
                layer: null,
                focusFeature: null
            }
        };
    },
    watch: {
        polygonsData: {
            handler() {
                this.$nextTick(() => {
                    this.addPolygons();
                });
            },
            deep: true,
            immediate: true
        }
    },
    created() {
        this.eventCallbackMap['click'].push(tapPolygon.bind(this));
    },
    methods: {
        // 多边形矩形
        addPolygons() {
            if (this.polygonNsp.layer) {
                this.polygonNsp.layer.getSource().clear();
            } else {
                this.polygonNsp.layer = new VectorLayer({
                    zIndex: 1,
                    source: new VectorSource({
                        features: []
                    })
                });
                this.map.addLayer(this.polygonNsp.layer);
            }
            this.polygonsData.forEach((polygonData, index) => {
                const polygonFeature = new Feature({
                    geometry: new Polygon([
                        polygonData.polygon.map((item) => [item.lng, item.lat])
                    ]),
                    name: 'polygon',
                    index
                });
                polygonFeature.setStyle(createPolygonStyleFn(polygonData));
                this.polygonNsp.layer.getSource().addFeature(polygonFeature);
            });
        },
        createFeatureStyle(option) {
            let fillColor;
            if (typeof option.fillColor === 'string') {
                fillColor = asArray(option.fillColor);
                if (typeof option.fillOpacity === 'number') {
                    fillColor[3] = option.fillOpacity;
                }
            }
            let strokeColor;
            if (typeof option.strokeColor === 'string') {
                strokeColor = asArray(option.strokeColor);
                if (typeof option.strokeOpacity === 'number') {
                    strokeColor[3] = option.strokeOpacity;
                }
            }
            return new Style({
                stroke: new Stroke({
                    width:
                        typeof option.strokeWidth === 'number'
                            ? option.strokeWidth
                            : 1,
                    color: strokeColor || [0, 0, 255, 0.5]
                }),
                fill: new Fill({
                    color: fillColor || [204, 243, 255, 0.1]
                })
            });
        }
    }
};
